<template>
	<view class="pickup-container page-container-with-bottom-btn">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">🚚 预约上门取件</text>
			<text class="page-subtitle">我们将安排专人上门取件，请确认以下信息</text>
		</view>

		<!-- 售后信息 -->
		<view class="after-sale-info-card">
			<view class="card-title">售后信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="info-label">售后单号</text>
					<text class="info-value">{{ afterSaleInfo.after_sale_sn }}</text>
				</view>
				<view v-for="(product, index) in afterSaleInfo.sku_info" :key="product.id" class="info-item">
					<text class="info-label">商品 {{product.quantity}} 件</text>
					<text class="info-value">{{ product.spu_name }} / {{ product.sku_name }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">售后类型</text>
					<text class="info-value">{{ getTypeTitle(afterSaleInfo.after_sale_type) }}</text>
				</view>
			</view>
		</view>

		<!-- 取件地址 -->
		<view class="pickup-address-card">
			<view class="card-title">
				<text class="title-text">取件地址</text>
				<text class="change-btn" @click="changeAddress">更换地址</text>
			</view>
			<view class="address-info">
				<view class="address-main">
					<text class="address-name">{{ afterSaleInfo.receiver_name }}</text>
					<text class="address-phone">{{ afterSaleInfo.receiver_phone_hidden }}</text>
				</view>
				<text
					class="address-detail">{{ afterSaleInfo.receiver_pcs+' '+$secret.decryptAES(afterSaleInfo.receiver_address) }}</text>
			</view>
		</view>

		<!-- 取件时间选择 -->
		<view class="pickup-time-card">
			<view class="card-title">选择取件时间</view>
			<view class="date-selector">
				<view class="date-tabs">
					<view class="date-tab" v-for="(date, index) in availableDates" :key="index"
						:class="{ active: selectedDateIndex === index }" @click="selectDate(index)">
						<text class="date-text">{{ date.label }}</text>
						<text class="date-desc">{{ date.desc }}</text>
					</view>
				</view>
			</view>
			<view class="time-slots">
				<view class="time-slot-title">可选时间段</view>
				<view class="time-slot-list">
					<view class="time-slot-item" v-for="(slot, index) in timeSlots" :key="index"
						:class="{ active: selectedTimeSlot === index, disabled: slot.disabled }"
						@click="selectTimeSlot(index)">
						<text class="slot-time">{{ slot.time }}</text>
						<text class="slot-status">{{ slot.status }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 联系方式 -->
		<view class="contact-info-card">
			<view class="card-title">联系方式</view>
			<view class="contact-form">
				<view class="form-item">
					<text class="form-label">联系人</text>
					<input class="form-input" placeholder="请输入联系人姓名" v-model="afterSaleInfo.contactName" />
				</view>
				<view class="form-item">
					<text class="form-label">联系电话</text>
					<input class="form-input" placeholder="请输入联系电话" v-model="afterSaleInfo.contactPhone"
						type="number" />
				</view>
			</view>
		</view>

		<!-- 备注信息 -->
		<view class="remark-card">
			<view class="card-title">备注信息（选填）</view>
			<textarea class="remark-textarea" placeholder="请输入特殊要求或备注信息，如门牌号、楼层等" v-model="remark"
				maxlength="200"></textarea>
			<view class="char-count">{{ remark.length }}/200</view>
		</view>

		<!-- 服务说明 -->
		<view class="service-note-card">
			<view class="card-title">服务说明</view>
			<view class="note-list">
				<view class="note-item" v-for="(note, index) in serviceNotes" :key="index">
					<text class="note-icon">{{ note.icon }}</text>
					<text class="note-text">{{ note.text }}</text>
				</view>
			</view>
		</view>

		<!-- 确认按钮 -->
		<view class="confirm-section">
			<button class="confirm-btn" :disabled="!canConfirm" @click="confirmPickup">
				确认预约
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				afterSaleId: '',
				afterSaleInfo: {},
				// 可选日期
				availableDates: [],
				selectedDateIndex: 1, // 默认选择明天
				// 时间段
				timeSlots: [{
						time: '09:00-12:00',
						status: '可预约',
						disabled: false
					},
					{
						time: '14:00-18:00',
						status: '可预约',
						disabled: false
					},
					{
						time: '19:00-21:00',
						status: '可预约',
						disabled: false
					}
				],
				selectedTimeSlot: -1,
				// 备注
				remark: '',
				// 服务说明
				serviceNotes: [{
						icon: '🕐',
						text: '取件员将在您选择的时间段内联系您并上门取件'
					},
					{
						icon: '📦',
						text: '请确保商品包装完好，我们会现场检查商品状态'
					},
					{
						icon: '📱',
						text: '取件前30分钟会有短信和电话提醒'
					},
					{
						icon: '🆓',
						text: '上门取件服务免费，无需支付额外费用'
					}
				]
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo']),

			canConfirm() {
				return this.selectedDateIndex !== -1 &&
					this.selectedTimeSlot !== -1 &&
					this.afterSaleInfo.contactName !== '' &&
					this.afterSaleInfo.contactPhone.length === 11
			}
		},
		onLoad(options) {
			if (options.afterSaleId) {
				this.afterSaleId = options.afterSaleId
				this.loadAfterSaleInfo()
			}
			this.loadAvailableDates();
		},
		methods: {
			// 加载售后信息
			loadAfterSaleInfo() {
				this.$api.order.GetAfterSalesInfo({
					id: this.afterSaleId
				}).then(res => {
					res.data.sku_info = this.$tools.parseJsonObject(res.data.sku_info)
					res.data.evidence = this.$tools.parseJsonObject(res.data.evidence)
					const province = this.$tools.parseJsonObject(res.data.receiver_province)
					const city = this.$tools.parseJsonObject(res.data.receiver_city)
					const town = this.$tools.parseJsonObject(res.data.receiver_town)
					if (province && province.name) {
						res.data.receiver_pcs = province.name + city.name + town.name;
					} else {
						res.data.receiver_pcs = '';
					}
					this.afterSaleInfo = res.data;

					if (!this.afterSaleInfo.contactName.trim()) {
						this.afterSaleInfo.contactName = !this.userInfo.realname.trim() ? this.userInfo.nickname :
							this.userInfo.realname;
					}
					if (!this.afterSaleInfo.contactPhone.trim()) {
						this.afterSaleInfo.contactPhone = this.$secret.decryptAES(this.userInfo.mobile);
					}
				})
			},

			// 加载可选日期
			loadAvailableDates() {
				const today = new Date()
				this.availableDates = [{
						day: 0,
						label: '今天',
						desc: '',
						date: ''
					},
					{
						day: 1,
						label: '明天',
						desc: '',
						date: ''
					},
					{
						day: 2,
						label: '后天',
						desc: '',
						date: ''
					}
				];

				this.availableDates.forEach(item => {
					let newDay = new Date(today);
					newDay.setDate(today.getDate() + item.day);

					const year = newDay.getFullYear()
					const month = String(newDay.getMonth() + 1).padStart(2, '0')
					const day = String(newDay.getDate()).padStart(2, '0')

					item.desc = `${month}月${day}日`;
					item.date = `${year}-${month}-${day}`;
				})
			},

			// 获取售后类型
			getTypeTitle(type) {
				const titleMap = {
					1: '退货',
					2: '换货',
					3: '仅退款',
					4: '补寄'
				}
				return titleMap[type] || '未知'
			},

			// 选择日期
			selectDate(index) {
				this.selectedDateIndex = index
				// 重新加载该日期的可用时间段
				this.loadTimeSlots(this.availableDates[index].date)
			},

			// 加载时间段
			loadTimeSlots(date) {
				// 这里应该根据日期调用API获取可用时间段（是否已经预约满）
			},

			// 选择时间段
			selectTimeSlot(index) {
				if (this.timeSlots[index].disabled) {
					return
				}
				this.selectedTimeSlot = index
			},

			// 更换地址
			changeAddress() {
				uni.navigateTo({
					url: '/pages/user/address?type=select'
				})
			},

			// 选择收货地址结果
			selectAddressEvent(address) {
				this.afterSaleInfo.receiver_address_id = address.id
				this.afterSaleInfo.receiver_name = address.realname
				this.afterSaleInfo.receiver_phone = address.mobile
				this.afterSaleInfo.receiver_province = address.province
				this.afterSaleInfo.receiver_city = address.city
				this.afterSaleInfo.receiver_town = address.town
				this.afterSaleInfo.receiver_street = address.street
				this.afterSaleInfo.receiver_address = address.address
				const province = this.$tools.parseJsonObject(address.province)
				const city = this.$tools.parseJsonObject(address.city)
				const town = this.$tools.parseJsonObject(address.town)
				if (province && province.name) {
					this.afterSaleInfo.receiver_pcs = province.name + city.name + town.name;
				} else {
					this.afterSaleInfo.receiver_pcs = '';
				}
			},

			// 确认预约
			confirmPickup() {
				if (!this.canConfirm) {
					uni.showToast({
						title: '请完善预约信息',
						icon: 'none'
					})
					return
				}

				const pickupData = {
					after_sales_id: this.afterSaleId,
					return_method: 2,
					return_type: 2,
					pickup_date: this.availableDates[this.selectedDateIndex].date,
					pickup_time: this.timeSlots[this.selectedTimeSlot].time,
					pickup_remark: this.remark,
					address: this.pickupAddress,
					contactName: this.afterSaleInfo.contactName,
					contactPhone: this.afterSaleInfo.contactPhone
				}

				uni.showLoading({
					title: '预约中...'
				})

				this.$api.order.AfterSalesReturn(pickupData).then(res => {
					uni.hideLoading()
					uni.showModal({
						title: '预约成功',
						content: `已成功预约${this.availableDates[this.selectedDateIndex].desc} ${this.timeSlots[this.selectedTimeSlot].time}的上门取件服务`,
						showCancel: false,
						success: () => {
							const pages = getCurrentPages()
							const prevPage = pages[pages.length - 2]
							if (prevPage) {
								prevPage.$vm.onSearch()
							}
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pickup-container {
		background-color: #f8f9fa;
	}

	.page-header {
		background-color: #ffffff;
		padding: 40rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 16rpx;
	}

	.page-subtitle {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	/* 卡片通用样式 */
	.after-sale-info-card,
	.pickup-address-card,
	.pickup-time-card,
	.contact-info-card,
	.remark-card,
	.service-note-card {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.change-btn {
		font-size: 26rpx;
		color: #52a58a;
		font-weight: normal;
	}

	/* 信息列表 */
	.info-list {
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	/* 地址信息 */
	.address-info {
		padding: 30rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
	}

	.address-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.address-name {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.address-phone {
		font-size: 26rpx;
		color: #666;
	}

	.address-detail {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	/* 日期选择 */
	.date-tabs {
		display: flex;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.date-tab {
		flex: 1;
		text-align: center;
		padding: 30rpx 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		border: 2rpx solid transparent;
	}

	.date-tab.active {
		background-color: #e8f5f0;
		border-color: #52a58a;
	}

	.date-text {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}

	.date-desc {
		font-size: 24rpx;
		color: #666;
	}

	/* 时间段选择 */
	.time-slot-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.time-slot-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.time-slot-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		border: 2rpx solid transparent;
	}

	.time-slot-item.active {
		background-color: #e8f5f0;
		border-color: #52a58a;
	}

	.time-slot-item.disabled {
		opacity: 0.5;
	}

	.slot-time {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.slot-status {
		font-size: 24rpx;
		color: #666;
	}

	.time-slot-item.disabled .slot-status {
		color: #999;
	}

	/* 表单 */
	.contact-form {
		margin-bottom: 20rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		width: 160rpx;
		flex-shrink: 0;
	}

	.form-input {
		flex: 1;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: 1rpx solid #e9ecef;
	}

	/* 备注 */
	.remark-textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: 1rpx solid #e9ecef;
		box-sizing: border-box;
	}

	.char-count {
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 16rpx;
	}

	/* 服务说明 */
	.note-list {
		margin-bottom: 20rpx;
	}

	.note-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.note-icon {
		font-size: 28rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
	}

	.note-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		flex: 1;
	}

	/* 确认按钮 */
	.confirm-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		padding: 30rpx 40rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.confirm-btn {
		width: 100%;
		background-color: #52a58a;
		color: #ffffff;
		border: none;
		border-radius: 50rpx;
		padding: 0 32rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.confirm-btn:disabled {
		background-color: #cccccc;
		color: #999999;
	}
</style>